<style lang="less">
.auth-admin {
  min-height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 24px 24px 48px;
  position: relative;
  &__number {
    color: #59595e;
  }
  &__operation {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .operation__tip {
      color: #bfbfbf;
      font-size: 14px;
      //   margin-left: 16px;
    }
  }
  &__table {
    .arco-table-tr {
      .arco-table-td {
        &:nth-last-of-type(1) {
          .arco-table-cell {
            color: #386cff;
          }
        }
      }
    }
    .table__operation {
      cursor: pointer;
      & + .table__operation {
        margin-left: 16px;
      }
    }
  }
  &__pagination {
    border-top: 1px solid #f1f1f1;
    height: 48px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24px;
  }
}
</style>

<template>
  <div class="auth-admin">
    <div class="auth-admin__operation">
      <div class="operation__left">
        <span class="operation__tip">
          （全部数据共<span class="auth-admin__number">{{total}}</span
          >条，销售总额：￥<span class="auth-admin__number">{{totalAmount / 100}}</span>）
        </span>
      </div>
      <div class="operation__right">
        <a-range-picker
          v-model="searchTime"
          value-format="X"
          :style="{ width: '229px', marginRight: '12px' }"
          @change="onTimeChange"
          @clear="clearSearchTime"
        />
        <a-input-search
          v-model="userSearchText"
          @search="onSearch"
          :style="{ width: '243px' }"
          placeholder="搜索手机号/用户ID/用户名"
        />
      </div>
    </div>
    <a-scrollbar style="overflow: auto">
      <a-table
        class="design__table auth-admin__table"
        :columns="authAdminColumns"
        :data="authAdminData"
        :pagination="false"
      >
        <template #createTime="{ record }">
          {{ record.createTime ? dateFormat(record.createTime) : '' }}
        </template>
        <template #dueDate="{ record }">
          {{ record.dueDate ? dateFormat(record.dueDate) : '' }}
        </template>
        <template #amount="{ record }">
          {{ record.amount / 100 }}
        </template>
        
        <template #operation="{ record }">
          <span
            class="table__operation"
            @click="
              changeEditRemarkDrawerVisible(true, record.id, record.remark)
            "
          >
            编辑备注
          </span>
          <a-popconfirm
            content="撤销后该授权归零"
            okText="撤销"
            cancelText="取消"
            @ok="cancelAuth(record.id)"
          >
            <span class="table__operation">撤销授权</span>
          </a-popconfirm>
        </template>
      </a-table>
    </a-scrollbar>
    <div class="auth-admin__pagination">
      <a-pagination
        :total="total"
        v-model:current="current"
        @change="getLicenseRecord"
      />
    </div>
    <edit-remark-drawer
      :visible="editRemarkDrawerVisible"
      :id="editDataId"
      @changeEditRemarkDrawerVisible="changeEditRemarkDrawerVisible"
      @updateList="getLicenseRecord"
      :remark-content="remarkContent"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { order } from "@/api";
import editRemarkDrawer from "./components/editRemarkDrawer.vue";
import { Message } from '@arco-design/web-vue';
import dateFormat from "ourwill-feutil/common/dateFormat";

const authAdminColumns: any = [
  {
    title: "订单编号",
    dataIndex: "orderNo",
    width: 200,
  },
  {
    title: "购买时间",
    slotName: "createTime",
    width: 170,
  },
  {
    title: "昵称",
    dataIndex: "nickname",
    width: 200,
  },
  {
    title: "手机号",
    dataIndex: "mobPhone",
    width: 156,
  },
  {
    title: "用户名",
    dataIndex: "username",
    width: 200,
  },
  {
    title: "用户ID",
    dataIndex: "userId",
    width: 80,
  },
  {
    title: "购买类型",
    dataIndex: "description",
    width: 150,
  },
  {
    title: "购买渠道",
    dataIndex: "source",
    width: 150,
  },
  {
    title: "有效期",
    slotName: "dueDate",
    width: 170,
  },
  {
    title: "付款金额",
    slotName: "amount",
    width: 150,
  },
  {
    title: "备注",
    dataIndex: "remark",
    width: 150,
  },
  {
    title: "操作",
    slotName: "operation",
    fixed: "right",
    width: 173,
  },
];
const authAdminData = ref([]);

const editRemarkDrawerVisible = ref(false);
const changeEditRemarkDrawerVisible = (
  v: boolean,
  id?: number,
  editContent?: string
) => {
  editRemarkDrawerVisible.value = v;
  if (id) {
    editDataId.value = id;
  }
  if (editContent) {
    remarkContent.value = editContent;
  }
};

const current = ref<number>(1);
const total = ref<number>(0);
const totalAmount = ref(0)
const searchTime: any = ref(["", ""]);
const userSearchText = ref("");
const getLicenseRecord = async () => {
  if(!searchTime.value) {
    searchTime.value = ['', ''];
  }
  const params = {
    pageNum: current.value,
    pageSize: 10,
    userSearchText: userSearchText.value,
    startTime: searchTime.value[0],
    endTime: searchTime.value[1],
  };
  const { ok, data } = await order.getLicenseRecord(params);
  if (!ok) return;
  authAdminData.value = data.data.listInfo.records;
  total.value = data.data.listInfo.total;
  totalAmount.value = data.data.totalAmount
};
const onTimeChange = () => {
	current.value = 1
	getLicenseRecord()
}
const onSearch = () => {
	current.value = 1
	getLicenseRecord()
}
const clearSearchTime = () => {
   searchTime.value = ['', ''];
  getLicenseRecord();
}
getLicenseRecord();

const editDataId: any = ref("");
const remarkContent = ref<string>("");
const cancelAuth = async (id: number) => {
  const { ok, data } = await order.cancelAuth(id);
  if (!ok) return;
  Message.success('撤销成功')
  getLicenseRecord();
};
</script>
